<template>
  <div class="bg-white pdt weui-flex ta-c v-mdl" >
    <div :class="{'weui-flex__item': !isTheSameGroup}">
      <button class="ui btn empty" open-type="share" style="display:block;width: 100%;height: 100%;">
        <i class="if icon-share fs-1"></i>
        <div class="fs-6 pdt-s">分享</div>
      </button>
    </div>
    <div v-if="isTheSameGroup" class="weui-flex__item" >
      <notify-btn cls="ui btn primary no-rounder" @hit="goMyHomework">
        我的作业
      </notify-btn>
    </div>
    <div class=" pdh-l" :class="{'weui-flex__item': !isTheSameGroup}">
      <form v-if="progress.liked" @submit="onUnstar" report-submit>
        <button class="ui btn empty" formType="submit" style="display:block;width: 100%;height: 100%;">
          <i class="if icon-favoed c-red fs-2" ></i>
          <div class="fs-xxs pdt-s">{{progress.likeCount}}</div>
        </button>
      </form>
      <form v-else @submit="onStar" report-submit>
        <button class="ui btn empty" formType="submit" style="display:block;width: 100%;height: 100%;">
          <i class="if icon-favo fs-2" ></i>
          <div class="fs-xxs pdt-s">{{progress.likeCount}}</div>
        </button>
      </form>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import NotifyBtn from '@/components/notify-btn'

export default {
  data () {
    return {
      isTheSameGroup: false
    }
  },
  components: {NotifyBtn},
  computed: {
    ...mapGetters([
      'groupId',
      'loginer'
    ]),
    ...mapGetters('progress', ['progress']),
  },
  mounted () {
    let {groupId} = this.$root.$mp.query
    if (groupId && groupId === this.groupId) {
      this.isTheSameGroup = true
    }
  },
  methods: {
    ...mapActions('progress', ['star', 'unstar']),
    ...mapActions('notification', ['enqueue']),
    goMyHomework () {
      wx.redirectTo({
        url: '/pages/task-invite/main?documentId=' + this.progress.document.id + '&groupOwnerId=' + this.loginer.id
      })
    },
    onStar(e) {
      this.star()
      this.enqueue(e.target.formId)
    },
    onUnstar(e) {
      this.unstar()
      this.enqueue(e.target.formId)
    }
  }
}
</script>

<style scoped lang="less">
@import "../../assets/less/var.less";

i {
  font-size: @fs-xl;
}
</style>
